<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/vue.js"></script>
  <style>
    .static{
      width:120px;
      height:120px;
      margin:20px;
      text-align: center;
      line-height: 120px;
      font-size: 50px;
    }
    .a{
      background: crimson;
    }
    .b{
      border-radius: 50%;
    }
    .c{
      border:4px solid darkviolet;
      box-shadow:  0px 0px 2px 2px yellow;
    }
    .wrapper{

    }
    .nav{
      display: flex;
    }
    .nav-item{
      width:100px;
      height:40px;
      line-height: 40px;
      text-align: center;
      background: deepskyblue;
      border-radius: 8px;
      color:#fff;
      font-size: 14px;
      margin:0 10px;
      cursor: pointer;
    }
    .nav-active{
      background: brown;
      color:deepskyblue;
    }
    .main{
      width:360px;
      padding:0 10px;
      margin-top:20px;
      box-sizing: border-box;
    }
    .content{
      width:100%;
      height:340px;
      background: brown;
      border-radius: 10px;
      text-align: center;
      line-height: 340px;
      font-size: 40px;
      color:#fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{title }}</h2>
    <div v-if="false">
      <h2 @click.once="counter++">counter ---  {{counter}}</h2>
      <button @click="greet"> greet event </button>
      <button @click="greet()"> greet </button>
      <button @click="greet('wh2112-daydayup')"> greet  带参数  </button>
  
      <button @click="getEvent">点击获取event1</button>
      <button @click="getEvent($event)">点击获取event2</button>
  
      <div @click="parentclick">
        <h2 @click.stop="clickOne">stop 一定会阻止事件冒泡</h2>
        <h2 @click.prevent="clicktwo">prevent 一定会阻止浏览器的默认事件(滚动事件)</h2>
      </div>
  
      <div>
        <p><input type="text" @input.once="countadd" placeholder="input"></p>
        <p><input type="text" @change.once="countadd" placeholder="change"></p>
        <p>
          <input type="text" placeholder="keyup" @keyup.enter.tab.left.right.space="getKeycode">
          <input type="text" placeholder="keydown" @keydown.13.32.37.39="getKeycode">
          <input type="text" placeholder="keypress" @keypress.enter.32 ="getKeycode">
        </p>
      </div>
      <div @touchstart="countadd" :style="{width:'220px',height:'220px',background:'red'}">
        touch系列事件(必须只能手机端触发)
      </div>  
    </div>

    <div>
      <h2>Vue 过滤器 </h2>
      <h4>str --- {{str | upper}}</h4>
      <h4 v-bind:str="str | upper" >str --- {{str | lower}}</h4>
      <h3>{{num | toFix(4) }}</h3>
      <h3>date === {{date | dateFormat('MM-DD HH:mm')}}</h3>
      <h3>total --- {{total | format(16)}}</h3>
      <h2>tel --- {{tel |telFormat("~")}}</h2>
      <h2>{{money}}</h2>
      <h2>money -- {{money | currency2('$',3) }}</h2>
    </div>
  </div>
  
  <script>
    // 全局过滤器 
    Vue.filter("upper",value=>{   // value 需要过滤的值 
      if(!value) return  ''
      return value.toUpperCase()
    })
    Vue.filter("toFix",(value,n)=>{
      if(!value) return  ''
      n = n || 3
      return value.toFixed(n)
    })

    Vue.filter("dateFormat",(value)=>{
       if(!value) return "";
       var time = new Date(value)
       var year = time.getFullYear()
       var month = time.getMonth()+1
       var day = time.getDate()
       var hour =time.getHours()
       var min = time.getMinutes()
       var sec = time.getSeconds()
       return `${year}-${month}-${day} ${hour}:${min}:${sec}`
    })

    Vue.filter("format",(value,n)=>{
      if(!value) return "";
      n = n || 10;
      return value.toString(n) // 进制转换 
    })
    // 255 => 255
    // 255 /10 = 25  5
    // 25  / 10 =  2   5
    // 2 /  10  = 0   2 
    // 255 / 8   =  31  - 7
    // 31 / 8  =    3   - 7
    // 3/ 8   = 0  - 3 

    // 255 /16 = 15 - 15   ff  abcdef 
    // #fff #000  

    Vue.filter("telFormat",(value,type='-')=>{
      if(!value) return "";
      value = value.toString().split("")
      value.splice(3,0,type)
      value.splice(8,0,type)
      return  value.join('')
    })

    Vue.filter("currency",(value,type="¥",n=2)=>{
      if(!value) return "";
      return type+value.toLocaleString("en",{
        minimumFractionDigits:n,   // 最少 保留几位小数
        maximumFractionDigits:n    // 最多 保留几位小数
      })
    })

    Vue.filter("currency2",(value,type="¥",n=2)=>{
      if(!value) return "";
      value = value.toFixed(n).toString().split(".")
      var zheng = value[0]
      var xiao = value[1] 
      zheng = zheng.split("").reverse()
      zheng = zheng.map((item,index)=>{
        if(index%3==0&&index!=0){
          item= item + ','  // 后面加 "," 又要翻转过来 
        }
        return item;
      })
      value = type+zheng.reverse().join("")+"."+xiao
      return value
    })



    // 封装过滤器  带有货币类型  $ ¥  每千位加 ,  末尾保留小数 

    const vm = new Vue({
      filters:{  // 局部注册过滤器
        lower(value){
          if(!value) return ''
          return value.toLowerCase()
        }
      },
      data:{
        title:"v-on 事件绑定  " ,
        counter:0,
        str:"Wh2112 - daydayup - YYDS",
        num:1314.5209012,
        date:new Date(),
        total:255,
        tel:18012348899,
        money:211222789.1234
      },
      methods:{
        getKeycode(e){
          console.log("键盘码:" + e.keyCode)
        },
        countadd(){
          this.counter++
        },
        greet(a){
          console.log(a)   // 如果 不写就是event
          console.log("greet 问候一下 " + a)
        },
        getEvent(e){
          console.log(e)
        },
        parentclick(){
          console.log("parentclick - parentclick - 父元素绑定的事件")
        },
        clickOne(){
          console.log("clickOne - clickOne - stop")
        },
        clicktwo(){
          console.log("clicktwo - clicktwo - prevent")
        }
      },
      
      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title; 
      }
    }).$mount("#app")

  </script>

  <!-- 

    用特殊变量 $event
    函数调用时候的参数 是 实参
    函数定义时候的参数 是 形参 

    $event vue 提供的事件对象 参数 

    事件修饰符
    event.preventDefault()  阻止浏览器的默认事件
    event.stopPropagation()  阻止事件冒泡 

    v-on 提供了事件修饰符 
    .stop        阻止单击事件继续传播  
    .prevent     阻止浏览器的默认事件  
    .capture     
    .self        
    .once        这个事件只能触发一次 
    .passive

    按键修饰符   键盘事件 (键盘码)
    enter    13 
    right    37 
    left     39
    space     32 
    up
    down 

    v-on:click  @click       
    input 
    change
    click
    dbclick
    keyup
    keydown
    keypress
    mousemove
    mousedown
    @mouseup
    @mouseenter
    @mouserleave 
    @touchstart   后面再讲 手机端的触摸事件 
    @touchmove
    @touchend

    原生绑定事件 (DOMO级事件  DOM2级 事件 )
    onclick="do()"  DOM0  
    document.getElementyById("box").onclick = fn;
    addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
    removeEventListener("click")

    jquery 绑定事件 
    on  /  off   $('.box').on('click')
    bind  /  unbind  $('.box').bind('click')
    click()

    事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
    $(parent).on('click',child,fn);    
    $(parent).delegate(child,'click',fn);   // 委托 

    过滤器  filter 
    Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
    过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
    “管道”符号指示   | 声明过滤器  
      
    Vue.filter 全局过滤器 
    filters 局部过滤器 
   -->
</body>
</html>